page-quotation-detail {
  .bg-color {
    background-color: #2d3945;
  }

  .info-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.2vw 2.4vw;

    .left-title {
      color: $gray-normal;
      font-size: 3.6vw;
    }

    .left-value {
      color: white;
      font-size: 4.2vw;
      margin-top: 1vw;
    }
  }

  .common-master {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 8.8vw;
  }

  .common-slave {
    font-size: 3.6vw;
    margin-top: 1.2vw;
  }

  .normal-master {
    @extend .common-master;
    color: $gray-normal;
  }

  .normal-slave {
    @extend .common-slave;
    color: $gray-normal;
  }

  .up-master {
    @extend .common-master;
    color: red;
  }

  .up-slave {
    @extend .common-slave;
    color: red;
  }

  .down-master {
    @extend .common-master;
    color: green;
  }

  .down-slave {
    @extend .common-slave;
    color: green;
  }

  .icon-size {
    font-size: 8.8vw;
  }

  .scroll-view {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    background-color: white;
    padding: 0;

    .button-md {
      margin-top: 0;
      margin-bottom: 0;
    }

    .button-ios {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  .tab-btn-common {
    color: white;
    background-color: $gm-primary;
    font-size: 3.6vw;
    text-align: center;
    min-width: 20%;
  }

  .tab-btn-select {
    @extend .tab-btn-common;
    border-bottom: solid white 4px;
  }

  .tab-btn-none {
    @extend .tab-btn-common;
    border-bottom: solid #2d3945 1px;
  }
}
